import React, { useRef, useState, useEffect } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import './styles.css';

const MergeTooltipSlider = () => {
  const containerRef = useRef(null);
  const [values, setValues] = useState([20, 80]);
  const [isOverlapping, setIsOverlapping] = useState(false);

  useEffect(() => {
    const checkOverlap = () => {
      if (containerRef.current) {
        const handles = containerRef.current.querySelectorAll('.noUi-handle');
        if (handles.length === 2) {
          const rect1 = handles[0].getBoundingClientRect();
          const rect2 = handles[1].getBoundingClientRect();
          setIsOverlapping(rect1.right > rect2.left);
        }
      }
    };

    // 初始检查
    checkOverlap();

    // 添加窗口大小改变监听
    window.addEventListener('resize', checkOverlap);

    return () => {
      window.removeEventListener('resize', checkOverlap);
    };
  }, []);

  const handleChange = (values) => {
    setValues(values);
  };

  const handleEnd = (values) => {
    console.log('合并提示滑块结束时的值:', values);
    console.log('合并提示滑块范围:', {
      min: 0,
      max: 100,
      current: values
    });
  };

  return (
    <div className="merge-tooltip-container">
      <h2>Merging Overlapping Tooltips Example</h2>
      <div className="slider-wrapper">
        <div className="slider-container" ref={containerRef}>
          <NoUiSlider
            start={values}
            connect={true}
            range={{
              min: 0,
              max: 100
            }}
            tooltips={true}
            onChange={handleChange}
            onEnd={handleEnd}
          />
          {isOverlapping && (
            <div className="merged-tooltip">
              {values[0]} - {values[1]}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MergeTooltipSlider; 